"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"

interface SearchSuggestionsProps {
    query: string
    onSelectSuggestion: (suggestion: string) => void
    onClose: () => void
}

export function SearchSuggestions({ query, onSelectSuggestion, onClose }: SearchSuggestionsProps) {
    const [trendingSearches, setTrendingSearches] = useState<Array<{ keyword: string; count: number }>>([])
    const [searchHistory, setSearchHistory] = useState<string[]>([])
    const router = useRouter()

    // 获取热门搜索和搜索历史
    useEffect(() => {
        // 模拟获取热门搜索
        const mockTrendingSearches = [
            { keyword: "权志龙", count: 4530000 },
            { keyword: "跳楼机", count: 4062000 },
            { keyword: "唯一", count: 1880000 },
            { keyword: "含得", count: 1047000 },
            { keyword: "the chase hearts2hearts", count: 245000 },
        ]
        setTrendingSearches(mockTrendingSearches)

        // 从本地存储获取搜索历史
        const history = localStorage.getItem("searchHistory")
        if (history) {
            setSearchHistory(JSON.parse(history))
        }
    }, [])

    // 过滤搜索建议
    const filteredSuggestions = query
        ? [...trendingSearches.map((item) => item.keyword), ...searchHistory].filter((item) =>
            item.toLowerCase().includes(query.toLowerCase()),
        )
        : []

    // 格式化数字
    const formatCount = (count: number) => {
        if (count >= 10000) {
            return (count / 10000).toFixed(1) + "万"
        }
        return count.toString()
    }

    // 清空搜索历史
    const clearHistory = () => {
        localStorage.removeItem("searchHistory")
        setSearchHistory([])
    }

    // 处理选择建议
    const handleSelectSuggestion = (suggestion: string) => {
        // 保存到搜索历史
        const newHistory = [suggestion, ...searchHistory.filter((item) => item !== suggestion)].slice(0, 10)
        localStorage.setItem("searchHistory", JSON.stringify(newHistory))

        onSelectSuggestion(suggestion)
    }

    return (
        <div className="absolute top-full left-0 right-0 bg-white dark:bg-gray-900 shadow-lg rounded-b-lg z-50 max-h-[70vh] overflow-y-auto">
            {/* 热门搜索 */}
            {!query && trendingSearches.length > 0 && (
                <div className="p-2">
                    <div className="grid grid-cols-1 divide-y">
                        {trendingSearches.map((item, index) => (
                            <div
                                key={index}
                                className="flex items-center justify-between py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                onClick={() => handleSelectSuggestion(item.keyword)}
                            >
                                <div className="flex items-center">
                                    <span className="w-6 text-center font-medium text-gray-500">{index + 1}</span>
                                    <span className="ml-4">{item.keyword}</span>
                                </div>
                                <span className="text-gray-400 text-sm">{formatCount(item.count)}</span>
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* 搜索建议 */}
            {query && filteredSuggestions.length > 0 && (
                <div className="p-2">
                    <div className="grid grid-cols-1 divide-y">
                        {filteredSuggestions.map((suggestion, index) => (
                            <div
                                key={index}
                                className="py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                onClick={() => handleSelectSuggestion(suggestion)}
                            >
                                {suggestion}
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* 搜索历史 */}
            {!query && searchHistory.length > 0 && (
                <div className="p-2">
                    <div className="flex items-center justify-between px-4 py-2">
                        <h3 className="text-sm font-medium text-gray-500">历史搜索</h3>
                        <Button
                            variant="ghost"
                            size="sm"
                            onClick={clearHistory}
                            className="text-sm text-primary hover:bg-transparent"
                        >
                            清空
                        </Button>
                    </div>
                    <div className="grid grid-cols-1 divide-y">
                        {searchHistory.map((item, index) => (
                            <div
                                key={index}
                                className="py-3 px-4 hover:bg-gray-100 dark:hover:bg-gray-800 cursor-pointer"
                                onClick={() => handleSelectSuggestion(item)}
                            >
                                {item}
                            </div>
                        ))}
                    </div>
                </div>
            )}

            {/* 无结果 */}
            {query && filteredSuggestions.length === 0 && (
                <div className="p-6 text-center text-gray-500">没有找到与 "{query}" 相关的结果</div>
            )}
        </div>
    )
}

